<template>
  <div class="home">
    <div class="content">
      <!-- 头部 -->
      <div class="header">
        <div class="text">外卖</div>
        <div class="location">
          <van-icon name="location" />
          <span>南职C-201</span>
          <van-icon name="arrow" />
        </div>
      </div>
      <!-- 主要内容 -->
      <div class="main">
        <div class="main_bg">
          <div class="search">
            <input type="text" />
            <div class="search_text">搜索</div>
          </div>
          <div class="classify">
              <!-- 大分类 -->
            <div class="big_classify">
              <div v-for="item in big_classify">
                <svg class="icon" aria-hidden="true">
                  <use :xlink:href="`#${item.icon}`"></use> 
                </svg>
                {{ item.name }}
              </div>
              
            </div>
            <!-- 小分类 -->
            <div class="small_classify">
              <div v-for="item in small_classify">
                <svg class="icon" aria-hidden="true">
                  <use :xlink:href="`#${item.icon}`"></use> 
                </svg>
                {{ item.name }}
              </div>
            </div>
          </div>

          <van-tabs class="van-tabs">
            <van-tab v-for="i in centent_nav_list" :title="i.tab" class="van-tab">
              <FoodList :food_list="i.data"></FoodList>
            </van-tab>
          </van-tabs>

        </div>
      </div>
    </div>

    <Footer></Footer>

  </div>
</template>

<script setup>
  import Footer from "../../components/Footer.vue"
  import FoodList from "./components/FoodList.vue"
  import { reactive,toRefs } from 'vue';
  let data = reactive({
      big_classify: [
        { name: "美食", icon: "icon-apple-and-pear" },
        { name: "甜点饮品", icon: "icon-tianpin" },
        { name: "超市便利", icon: "icon-chaoshi" },
        { name: "生鲜果蔬", icon: "icon-shuiguo" },
        { name: "滴团买药", icon: "icon-yaopin" },
      ],
      small_classify: [
        { name: "午餐", icon: "icon-iconfonttubiaozhizuo-1" },
        { name: "买酒", icon: "icon-iconfonttubiaozhizuo-" },
        { name: "新鲜水果", icon: "icon-iconfonttubiaozhizuo-9" },
        { name: "汉堡披萨", icon: "icon-iconfonttubiaozhizuo-6" },
        { name: "休闲饮品", icon: "icon-iconfonttubiaozhizuo-8" },
        { name: "夜宵", icon: "icon-iconfonttubiaozhizuo-3" },
        { name: "吐司", icon: "icon-iconfonttubiaozhizuo-5" },
        { name: "跑腿", icon: "icon-paotuiAPP" },
        { name: "美人佳丽", icon: "icon-iconfonttubiaozhizuo-2" },
        { name: "全部分类", icon: "icon-fenlei" },
      ],
      centent_nav_list: [
        {
          tab: "天天神券",
          data: [
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://img95.699pic.com/photo/60022/1992.jpg_wh860.jpg",
              title: "隆江猪脚饭",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
          ],
        },
        {
          tab: "减配送费",
          data: [
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
          ],
        },
        {
          tab: "点评高分",
          data: [
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
          ],
        },
        {
          tab: "会员满减",
          data: [
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "鱼拿酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
          ],
        },
      ],
    });
    const {big_classify,small_classify,centent_nav_list} = {...toRefs(data)}
</script>

<style lang="less">
.home {
display: flex;
flex-flow: column;
height: 100%;

.content {
  flex: 1;
  overflow-y: auto;
  .main {
    margin-top: -30px;
    .van-tabs {
      
      .van-tab{
        font-size: 6px;
      }
    }
    .main_bg {
      background-image: linear-gradient(#fff, #f5f5f5);
      padding: 10px 5px 0 5px;
      border-radius: 10px 10px 0 0;
      position: relative;
      .classify {
        padding: 20px 0;
        font-size: 6px;

        .small_classify {
          display: flex;
          flex-wrap: wrap;

          div{
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: center;
            width: 20%;

            .icon{
              width: 16px;
              height: 16px;

            }
          }
          
        }
        .big_classify {
          display: flex;
          div{
            display: flex;
            flex:1;
            flex-flow: column;
            align-items: center;
            justify-content: center;

            .icon{
              width: 20px;
              height: 20px;

            }
          }
          }
        }
      }

      .search {
        position: relative;
        .search_text {
          position: absolute;
          background-color: #ffc400;
          right: -4px;
          top: 1px;
          width: 50px;
          height: 20px;
          border-radius: 16px;
          text-align: center;
          line-height: 20px;
          font-size: 10px;
        }
        input {
          width: 100%;
          border: 1px solid #ffc400;
          border-radius: 20px;
          height: 20px;
        }
      }
    }
  }

  .header {
    background-image: linear-gradient(#ffc400, #fff);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 5px 40px 5px;
    .text {
      font-size: 12px;
      font-weight: 600;
    }
    .location {
      span {
        margin: 0 5px;
      }
      font-size: 10px;
    }
  }
}
</style>